<template>
  <div class="moreMV">
    <div class="moreMVBox">
      <div class="mvTitle">
        <p>更多精彩MV</p>
        <!-- <button>MV分类</button> -->
      </div>
      <template v-for="item in moreMvList">
        <div
          class="mvMore"
          :key="item.id"
          v-if="moreMvList"
          @click="goDetails(item.id,item.artistId)"
        >
          <div class="imgBox">
            <img :src="item.cover" alt />
            <div class="mack"></div>
            <i class="iconfont icon-bofang1 bf1"></i>
            <span>
              <i class="iconfont icon-bofangsanjiaoxing"></i>
              {{item.playCount}}
            </span>
          </div>
          <p class="mvName">
            {{item.name}}
            <span>|</span>
            <span class="desc">{{item.briefDesc}}</span>
          </p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["moreMvList"],
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    goDetails(id, artistId) {
      this.$router.push({
        name: "mvdetails",
        params: {
          id: id,
          artistId: artistId
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.moreMV {
  //   margin: vw(20) vw(16);
  border-bottom: vw(1) solid #ccc;
  .moreMVBox {
    width: 100%;
    .mvTitle {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(20) vw(16) vw(10);
      p {
        font-size: vw(18);
        font-weight: bold;
        color: #000;
      }
      button {
        width: vw(68);
        height: vw(22);
        border: 1px solid #ccc;
        border-radius: vw(20);
        font-size: vw(12);
        background: #fff;
      }
    }
    .mvMore {
      width: 100%;
      padding: vw(20) vw(16) vw(10);
      border-bottom: vw(1) solid #ccc;
      .imgBox {
        width: 100%;
        height: vw(180);
        overflow: hidden;
        position: relative;
        border-radius: vw(10);
        img {
          width: 100%;
          height: vw(180);
        }
        .mack {
          width: 100%;
          height: vw(180);
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
        }
        .bf1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: vw(40);
          color: #ccc;
        }
        span {
          position: absolute;
          bottom: vw(12);
          left: vw(12);
          color: #fff;
          font-size: vw(16);
          i {
            font-size: vw(16);
            padding-right: vw(2);
          }
        }
      }
      .mvName {
        font-size: vw(18);
        font-weight: bold;
        padding: vw(10) 0;
        .desc {
          font-size: vw(16);
          color: #333;
          padding-left: vw(10);
        }
      }
    }
  }
}
</style>